import { Component } from 'react';
import './Jam.less';
import Button from 'uxcore-button';
import Select from 'uxcore-select2';
import Linechart from 'components/linechart';
const Option = Select.Option;

const data1 = {
  xText: '平均车速(km/h)',
  xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
  yAxis: [
    {
      name: '线路一',
      // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
      data:[],
      color: '#A1D663'
    }, {
      name: '线路二',
      // data: [0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
      data:[],
      color: '#5B99EB'
    }, {
      name: '线路三',
      // data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
      data:[],
      color: '#0F9EA0'
    }, {
      name: '线路四',
      // data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
      data:[],
      color: '#2A3FDF'
    }, {
      name: '线路五',
      // data: [1.2, 1.2, 5.0, 10.3, 12.0, 20.0, 25.8, 20.1, 11.1, 14.1, 18.6, 2.5],
      data:[],
      color: '#FFD200'
    }
  ]
}

const data2 = {
  xText: '平均车速(km/h)',
  xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
  yAxis: [
    {
      name: '今天',
      color: '#EA545F',
      // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      data:[]
    }, {
      name: '前一天',
      color: '#A1D663',
      // data: [1.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      data:[]
    }, {
      name: '前两天',
      color: '#FFA60B',
      // data: [2.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      data:[]
    }
  ]
}

export default class Jam extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: data1,
      display: 'none',
      active: 'speed',
      area: '',
      road: ''
    }
  }

  buttonClick(value) {
    switch (value) {
      case 'time':
        this.setState({ data: data2, display: 'inline-block', active: value });
        break;
      default:
        this.setState({ data: data1, display: 'none', active: value });
        break;
    }
  }

  selectChange(type, value) {
    switch (type) {
      case "road":
        this.setState({ road: value });
        break;
      default:
        this.setState({ area: value });
        break;
    }
  }

  render() {
    let { data, display, active } = this.state;
    return (
      <div className="mod-jam">
        <div>
          <Button type="blue" className={active == 'speed' ? 'button-active' : ''} onClick={this.buttonClick.bind(this, 'speed')}>平均车速</Button>
          <Button type="blue" className={active == 'time' ? 'button-active' : ''} onClick={this.buttonClick.bind(this, 'time')}>同期对比</Button>
        </div>
        <div>
          <Select defaultValue="拱墅区" style={{ width: 90 }} dropdownClassName="kuma-select2-selected-has-icon" onChange={this.selectChange.bind(this, 'area')}>
            <Option value="拱墅区">拱墅区</Option>
            <Option value="西湖区">西湖区</Option>
            <Option value="上城区">上城区</Option>
          </Select>
          <Select defaultValue="余杭塘路" style={{ width: 90, display: display }} dropdownClassName="kuma-select2-selected-has-icon" onChange={this.selectChange.bind(this, 'road')}>
            <Option value="余杭塘路">余杭塘路</Option>
            <Option value="文一西路">文一西路</Option>
            <Option value="文二西路">文二西路</Option>
          </Select>
        </div>
        <Linechart data={data} />
      </div>
    );
  }
}
